<template>
  <div class="h100p pb70">

    <!--lists-->
    <div class="pb54">
      <div class="bgfff mt10 pl17 pr15 fs16 ca8 lh44" v-for="(v,k) in lists" :key="k">

        <div class="disflex jsbet align-cen">
          <input type="text" class="lh44 h44 fs16 c38 fbold pha8"
                 placeholder="请输入标签组名" v-model="v.title">
          <div class="disflex">
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/del.png"
                 @click="del(0,k,0,v.id)"
                 alt="" class="w15 h15 enlarge-range"
            />
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/check.png"
                 v-if="v.isSave"
                 @click="confirm(k)"
                 alt="" class="w15 h15 enlarge-range"
            />
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/no_check.png"
                 v-else
                 @click="confirm(k)"
                 alt="" class="w15 h15 enlarge-range"
            />
          </div>
        </div>

        <div v-for="(item,index) in v.child" :key="index" class="disflex jsbet">
          <input type="text" class="lh44 h44 fs16 ca8 pha8"
                 placeholder="请输入子标签名" v-model="item.title">
          <div class="disflex align-cen">
                    <span class="w15 h15 bradius50p label" :style="{background : item.color}"
                          @click="color_show_tap(this,$event,item.id , k ,index)"></span>
            <img @click="del(1,k,index,item.id)" src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/del_2.png"
                 alt="" class="w16 h16 enlarge-range"
            />
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/check.png" v-if="item.isSave"
                 @click="confirm(k,index)"
                 alt="" class="w15 h15 enlarge-range"
            />
            <img src="https://one-stand.oss-cn-shanghai.aliyuncs.com/yimai_photos/crm/no_check.png"
                 v-else
                 @click="confirm(k,index)"
                 alt="" class="w15 h15 enlarge-range"
            />
          </div>
        </div>
        <!--添加子标签-->
        <div class="disflex jsbet" @click="add(1,k)">
          <span>添加子标签</span>
        </div>
      </div>
    </div>


    <!--choose  color-->
    <div class="posab shadow_gray  bradius5 textc choose_color disflex"
         v-if="color_modal"
         :style="{top:fix_y + 'px'}">
      <div class="bgfff color-select bradius5 pb25">
        <b @click="choose_color('#FD634E')" class="w15 h15 bradius50p bgorange"></b>
        <b @click="choose_color('#FFA133')" class="w15 h15 bradius50p bgyellow"></b>
        <b @click="choose_color('#2BCF88')" class="w15 h15 bradius50p bggreen"></b>
        <b @click="choose_color('#51CDCB')" class="w15 h15 bradius50p bgblue"></b>
        <b @click="choose_color('#566C84')" class="w15 h15 bradius50p bg55"></b>
        <b @click="choose_color('#F5F5F6')" class="w15 h15 bradius50p bgf5f6"></b>
      </div>

      <span class="triangle_border_right shadow_gray mt5">

            </span>
    </div>


    <!--bottom-->
    <div class="disflex fs18 textc lh49 fix_bottom">
      <span class="w100p ca8 bgfff" @click.stop="page_turn(bottom.left.url)">{{bottom.left.text}}</span>
    </div>


  </div>
</template>

<script>
  import BottomButtonTwo from '@/components/bottom_button_two' // 订单项
  import WXAJAX from '../../utils/request'
  import StaticResources from '@/components/StaticResources';

  export default {
    name: '',
    components: {BottomButtonTwo, StaticResources},
    data() {
      return {
        lists: [
          {
            title: '',
            id:0,
            child: [
              {id: 4, title: '', color: '#F5F5F6' , lableId : 0},
              {id: 5, title: '', color: '#F5F5F6' , lableId : 0},
            ]
          }

        ],
        bottom: {
          left: {
            text: '添加标签组', url: 'edit'
          },
          right: {
            text: '保存', url: 'saveall'
          }
        },
        fix_y: 52,
        color_modal: false,
        choose_color_id: 0 ,
        active_id1:0,//当前选择的一级分类id
        active_id2:0//当前选择的二级分类的id
      }

    },
    mounted() {
      wx.setNavigationBarTitle({
        title: "编辑标签组"
      });
      this.inits();
    },
    methods: {
      inits(){//获取标签数据
        wx.showLoading();
        let v = this ;

        WXAJAX.POST('', '', '/companyCustomerLable/getTree').then((data) => {

          wx.hideLoading();
          if(data){
            v.lists = [] ;
            let datas = [] ;
            data.forEach(function (i1, k1 ) {
              datas.push({
                title : i1.lableName ,
                id : i1.lableId ,
                isSave: true,
                child : [] ,
              });
              i1.lableResponses && i1.lableResponses.forEach(function (i2,k2) {
                datas[k1].child.push({
                  id : i2.lableId ,
                  title : i2.lableName ,
                  color : i2.lableColor ,
                  isSave: true,
                  lableId : i2.lableId
                })
              })

            });
            v.lists = datas ;
          }

        }).catch((err) => {
          console.log(err);
          wx.hideLoading();
        });
      },
      page_turn(method) {
        if(method == 'edit'){
          this.add(0)
        }else{
          this.color_modal = false ;
          wx.showLoading();
          setTimeout(function () {
            wx.hideLoading();
            wx.navigateBack();
          },800)
        }
        console.log(method);
      },
      confirm(index1,index2){//保存
        let list = this.lists[index1] ,
          params = {} ,
          url = '' ;

        if(index2 >=0){//二级
          if(!list.child[index2].title){
            wx.showToast({
              title: '请输入子标签名！',
              icon: 'none'
            });
            return
          }

          if(list.id == 0){
            wx.showToast({
              title: '请先保存标签组名！',
              icon: 'none'
            });
            return
          }
          console.log('-------------------',list.child[index2]);
          if(list.child[index2].lableId == 0){//新增
            url = '/companyCustomerLable/addLable' ;
            params = {
              lableColor : list.child[index2].color ,
              lableName : list.child[index2].title ,
              parentId : list.id  ,
            }
          }else{//编辑
            url = '/companyCustomerLable/updLable' ;
            params = {
              lableColor : list.child[index2].color ,
              lableName : list.child[index2].title ,
              parentId : list.id  ,
              lableId : list.child[index2].lableId ,
            }
          }

        }else {//一级
          if(!list.title){
            wx.showToast({
              title: '请输入标签组名！',
              icon: 'none'
            });
            return ;
          }

          if(list.id == 0){//新增
            url = '/companyCustomerLable/addLable' ;
            params = {
              lableColor : '' ,
              lableName : list.title ,
              parentId : 0 ,
            }
          }else{//编辑
            url = '/companyCustomerLable/updLable' ;
            params = {
              lableColor : list.color ,
              lableName : list.title ,
              parentId : 0  ,
              lableId : list.id ,
            }
          }

        }

        wx.showLoading();
        let v = this ;

        WXAJAX.POST(params, '', url).then((data) => {

          wx.hideLoading();
          if(data){
            if(index2 == undefined){
              v.$set(v.lists[index1] , 'id' , data);
              v.$set(v.lists[index1] , 'isSave' , true);
            }else{
              v.$set(v.lists[index1].child[index2] , 'lableId' , data );
              v.$set(v.lists[index1].child[index2] , 'isSave' , true );
            }
          }
          wx.showToast({
            title: '成功！',
            icon: 'none'
          });

        }).catch((err) => {
          console.log(err);
          wx.hideLoading();
        });
      },
      color_show_tap(obj, dom, id , index1 ,index2) {
        let v = this;
        if (id == v.choose_color_id) {
          v.color_modal = !v.color_modal;
          v.fix_y = dom.pageY - 21;
          return
        }

        v.fix_y = dom.pageY - 21;
        v.color_modal = true;
        v.choose_color_id = id;
        v.active_id1 = index1 ;
        v.active_id2 = index2 ;
      },
      del(method , index1 , index2 , lableId){//删除标签
        // method ： 0 --  标签组 ， 1 -- 单个 ，
        // index1 : 一级分类的index ， index2 ： 二级分类 index
        this.color_modal = false ;
        console.log('-------------',lableId);
        if(lableId == 0){
          if(method == 0){
            this.lists.splice(index1,1);
          }else if(method == 1){
            this.lists[index1].child.splice(index2,1)
          }
          return
        }

        wx.showLoading();
        let v = this ;

        WXAJAX.POST({
          lableId : lableId
        }, '', '/companyCustomerLable/delLable').then((data) => {

          wx.hideLoading();
          console.log(data);
          if(method == 0){
            v.lists.splice(index1,1);
          }else if(method == 1){
            v.lists[index1].child.splice(index2,1)
          }
          wx.showToast({
            title: '成功！',
            icon: 'none'
          });

          console.log(data);

        }).catch((err) => {
          console.log(err);
          wx.hideLoading();
        });

      },
      add(method,index1){//添加标签
        //method : 0 -- 标签组 ， 1 -- 子标签
        // index1 ： 一级分类index
        if(method == 0){
          if(this.lists.length >= 3){
            wx.showToast({
              title: '最多只能添加3组标签！',
              duration: 2000,
              icon: 'none'
            });
            return
          }

          let last_id = this.lists.length ? this.lists[this.lists.length-1].child[this.lists[this.lists.length-1].child.length-1].id : 0;

          this.lists.push(
            {
              title: '',
              id:0,
              child: [
                {id: last_id+1, title: '', color: '#F5F5F6' , lableId : 0},
                {id: last_id+2, title: '', color: '#F5F5F6' , lableId : 0},
              ]
            }
          )

        }else if(method == 1){
          if(this.lists[index1].child.length >= 6){
            wx.showToast({
              title: '最多只能添加6个子标签！',
              duration: 2000,
              icon: 'none'
            });
            return
          }
          let childs = this.lists[index1].child.length ;
          this.lists[index1].child.push(
            {id: childs, title: '', color: '#F5F5F6' , lableId : 0},
          )
        }

      },
      choose_color(color){//选择颜色
        this.$set(this.lists[this.active_id1].child[this.active_id2],'color' , color)
      }
    }
  }
</script>

<style>
  .enlarge-range{
    padding: 5px;
    margin-left: 10px;
  }
  .label{
    border: 5px solid white;
  }
  .color-select{
    padding: 10px 0;
    text-align: center;
  }
  .color-select > b{
    border: 20px solid white;
    border-top-width: 10px;
    border-bottom-width: 10px;
  }
  .choose_color {
    width: 50px;
    right: 135px;
    transition: .2s;
  }

  .choose_color.w0 {
    width: 0;
    overflow: hidden;
  }

  .triangle_border_right {
    display: block;
    width: 10px;
    height: 10px;
    background: #fff;
    transform: rotate(45deg);
    position: absolute;
    right: -6px;
    top: 12px;
  }

</style>






























